{% extends 'social_base.html' %}
{% load static %}
{% block title %}
{{ username }}的朋友圈
{% endblock %}
{% block head %}
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
        background-image: url('{% static 'images/img.png'%}');
        background-size: cover;
    }
</style>
{% endblock %}
{% block body %}

<div class="profile-container">

    <h1>{{ username }}的朋友圈</h1>
    <a href="{% url 'create_post' username=user.user.username %}" class="btn btn-light"
       style="font-size: 25px;background-color: #9eeaf9">发布新的朋友圈</a>
    <a href="{% url 'view_posts' username=user.user.username %}" class="btn btn-light"
       style="font-size: 25px;background-color: #9eeaf9">查看朋友圈</a>

    {% for post in user_posts %}
        <div style="background-color: whitesmoke;border-radius: 10px;margin-top: 10px;padding: 10px">

            <p class="post-font">{{ post.content }}</p>
            {% if post.image %}
                <img src="{{ post.image.url }}" alt="Post Image" style="max-width: 800px; /* 限制图片的最大宽度为300像素 */
    max-height: 800px; /* 限制图片的最大高度为300像素 */
    width: auto; /* 让浏览器根据设置的 max-width 和 max-height 来自动调整宽度 */
    height: auto; /* 让浏览器根据设置的 max-width 和 max-height 来自动调整高度 */">
            {% endif %}
            <p>{{ post.created_at }}</p>
            <form method="post" action="">
                {% csrf_token %}
                <input type="hidden" name="post_id" value="{{ post.id }}">
                <button type="submit" class="btn btn-light" onclick="return confirm('是否删除？')"
                        style="font-size: 15px;background-color: #f1aeb5">删除
                </button>
            </form>
        </div>
    {% endfor %}
</div>
<script>
    function confirmDelete() {
        // 使用 confirm 函数弹出确认对话框
        const result = confirm("是否删除？");


        if (result) {
            document.getElementById("deleteForm").submit();
        } else {
            // 用户点击了取消（否），在这里不执行任何提交表单的操作
        }
    }
</script>
{% endblock %}